<template>
    <div class="common-layout">
    <el-container>
      <el-header >
          <div class="first">
             <div class="f1"> 
            <span class="iconfont icon-jigou first-1" ></span>  <span>机构数量:</span>&nbsp;<span> 20048</span> 
           </div>
             <div class="f1"> 
            <span class="iconfont icon-renwu1 first-1"></span> <span>员工数量:</span>&nbsp;<span>2000 </span> 
           </div>
             <div class="f1"> 
            <span class="iconfont icon-hetong1 first-1"></span><span>合同数量:</span>&nbsp;<span>20050 </span> 
           </div>
             <div class="f1"> 
            <span class="iconfont icon-rizhiguanli first-1"></span><span>日志数量:</span>&nbsp;<span> 20040</span> 
           </div>
             <div class="f1"> 
            <span class="iconfont icon-woderenwu first-1"></span><span>任务数量:</span>&nbsp;<span> 20040</span> 
           </div>
             <div class="f1"> 
            <span class="iconfont icon-shouhoupeijianPRshenqing-03 first-1"></span>&nbsp;<span>售后数量:</span><span>20040 </span> 
           </div>
           
          </div>
            <hr>
      </el-header>
   
      <el-main> 
      <div class="first2">
             <div class="second"> 
                <div class="left" >
                    <span class="iconfont icon-jinri l1"></span>
                </div>
                <div class="right">
                  <p>200</p>
                  <span>今日新增机构</span>
                </div>
            </div>
              <div class="second"> 
                <div class="left" >
                    <span class="iconfont icon-yuyuedingdan l1"></span>
                </div>
                <div class="right">
                  <p>210</p>
                  <span>今日新增预约</span>
                </div>
            </div>
              <div class="second"> 
                <div class="left" >
                    <span class="iconfont icon-rizhi2 l1"></span>
                </div>
                <div class="right">
                  <p>220</p>
                  <span>今日新增日志</span>
                </div>
            </div>
              <div class="second"> 
                <div class="left" >
                    <span class="iconfont icon-hetong l1"></span>
                </div>
                <div class="right">
                  <p>230</p>
                  <span>今日新增合同</span>
                </div>
            </div>
              <div class="second"> 
                <div class="left" >
                    <span class="iconfont icon-renwu1 l1"></span>
                </div>
                <div class="right">
                  <p>240</p>
                  <span>今日新增商机</span>
                </div>
            </div>
              <div class="second"> 
                <div class="left" >
                    <span class="iconfont icon-lianxishouhou l1"></span>
                </div>
                <div class="right">
                  <p>240</p>
                  <span>今日新增售后</span>
                </div>
            </div>
           
      </div>
      <hr>
      <h2>总待办事项</h2>
      <div class="three3">
          <div class="three">
              <span class="iconfont icon-renwu three31" ></span>
              <p>总的任务<span class="three311">150</span></p>
          </div>
           <div class="three">
              <span class="iconfont icon-haoyou three32" ></span>
              <p>总的商机<span class="three312">580</span></p>
          </div>
           <div class="three">
              <span class="iconfont icon-yuyuedingdan three33" ></span>
              <p>总的预约<span class="three313">280</span></p>
          </div>
           <div class="three">
              <span class="iconfont icon-gengduochanpin three34" ></span>
              <p>总的产品<span class="three314">360</span></p>
          </div>
           <div class="three">
              <span class="iconfont icon-hetong three35" ></span>
              <p>总的合同<span class="three315">300</span></p>
          </div>
           <div class="three">
              <span class="iconfont icon-yusan three36" ></span>
              <p>总的售后<span class="three316">300</span></p>
          </div>
      </div>
      <hr>
      <div class="four">
            <div class="four1">
                 <span class="iconfont icon-hetong four11 four21"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <p>今日任务共(<span>150</span>)条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;资源部:(<span>30</span>)条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实施部:(<span>30</span>)条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 制作部:(<span>30</span>)条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;技术部:(<span>30</span>)条</p> 
            </div>
             <div class="four1">
                 <span class="iconfont icon-bijiben four11 four22"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <p>今日资料库共(<span>120</span>)种&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 培训资料:(<span>30</span>)份&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产品资料:(<span>100</span>)份&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 FAQ资料:(<span>70</span>)份</p> 
            </div>
             <div class="four1">
                 <span class="iconfont icon-chanpinzixun four11 four23"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <p>今日开通产品共(<span>80</span>)个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 触摸屏:(<span>30</span>)个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;专区:(<span>30</span>)个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 app:(<span>10</span>)个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微刊:(<span>10</span>)个</p> 
            </div>
      </div>
      </el-main>
     
    </el-container>
  </div>
</template>

<script  steup>

</script>

<style>
.first{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  margin-top: 30px;
  /* height: 150px; */
}
.first .f1 .first-1{
  display: inline-block;
  width: 30px;
  height: 30px;
  font-size: 30px;
  color: rgb(9, 150, 238);
  font-weight: bolder;
}
.first .f1 span:nth-child(3){
 
  color: blue;
  font-weight: bolder;
}
.first2{
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  margin-bottom: 50px;
}
.second{
  display: flex;
}
.first2 .second .left .l1{
  width: 30px;
  height: 30px;
  font-size: 50px;
  color: rgba(14, 135, 67, 0.935);
  font-weight: bolder;
}
.right{
  /* width: 10px; */
  margin-left: 30px;
  text-align: center;
  
}
.right p{
     color: rgba(14, 135, 67, 0.935);
     font-weight: bolder;
}
.right span{
  display: inline-block;
  font-size: 18px;
 
}
.left{
  padding-top: 20px;
   
}
.left span{
  /* display: inline-block; */
  width: 30px;
  height: 30px;
  font-size: 40px;
}
h2{
  text-align: center;
}
.three3{
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.three3 .three span {
  display: inline-block;
  font-size: 30px;
}
.three3 .three .three31,
.three3 .three .three32,
.three3 .three .three33,
.three3 .three .three34,
.three3 .three .three35,
.three3 .three .three36{
  font-size: 50px;
  color: slategrey;
}
.three3 .three .three32{
  color: blueviolet;
}
.three3 .three .three33{
  color: rgb(28, 154, 226);
}
.three3 .three .three34{
  color: rgb(15, 160, 78);
}
.three3 .three .three35{
  color: rgb(216, 24, 226);
}
.three3 .three .three36{
  /* font-size: 60px; */
  color: rgb(247, 232, 18);
}
.three3 .three .three311,
.three3 .three .three312,
.three3 .three .three313,
.three3 .three .three314,
.three3 .three .three315,
.three3 .three .three316{
  font-size: 14px;
  font-weight: bold;
  color: blue;
}
.four1{
  display: flex;
  margin-top: 80px;
  /* justify-content: space-around; */
}
.four1 .four21{
color: orangered;
/* background: orangered; */
}
.four1 .four22{
color: rgb(17, 101, 190);
}
.four1 .four23{
color: rgb(183, 22, 201);
}
.four1 .four11{
  display: inline-block;
  font-size: 80px;
  /* color:red; */
}
.four1 p span{
  display: inline-block;
  /* margin-right: 60px; */
  color: blue;
  font-weight: bolder;
}
</style>